<template>
	<scroll-view scroll-y="true" class="layout">
		<VersionHeader :version_control="isVersionControl"></VersionHeader>
		<!-- <version-header  /> -->
		<view class="main">
			<view class="float heibian speed-loss">
				<view class="speed-left">
					<view class="juzhong">速度损失</view>
					<view class="juzhong" style="margin-bottom: 23rpx;">(V_Loss):</view>
					<view class="juzhong">第
						<view class="number-sn" style="font-size: 75rpx;">
							{{group}}
						</view>
						组
					</view>
					<view class="juzhong">第
						<view class="number-sn" style="font-size: 75rpx;">
							{{index}}
						</view>
						个
					</view>
				</view>
				<view class="" style=" width: 50%; padding-top: 20rpx;">
					<view class="juzhong" style="margin-bottom: 10rpx;">
						<VersionCanvas :father-msg="v_loss"></VersionCanvas>
						
					</view>
					<view class="juzhong" style="font-size: 24rpx; margin-bottom: 10rpx; font-weight: 400; line-height: 17.38px;">
						<view style="margin-right: 160rpx;">提示：</view>
						<view @click="toggleMute" style="width: 50rpx; height: 50rpx;">
						      <img
						        :src="isMuted ? img_url[1] : img_url[0]"
						        style="height: 100%; width: 100%;"
						        alt=""
						      />
						</view>
					</view>
					<view class="" style=" padding-left: 12rpx; height: 70rpx; margin-left: 12rpx; margin-right: 12rpx; background-color: rgba(85, 82, 242, 0.2); color: rgba(42, 130, 228, 1);" >
						<view class="juzhong" >{{tips}}</view>
					</view>
				</view>
			</view>

			<view class="four-value grid-item heibian">
				<view class="single-module" v-for="(item,index) in arrs" :key="item.value">
					<view>{{item.text}}</view>
					<view>{{item.value}}</view>
				</view>
			</view>


			<view class="float heibian two-value">
				<view class="train-choose-left">
					<view class="juzhong" style="font-size: 40rpx; ">训练目的</view>
					<view class="picker juzhong" style="height: 70rpx; margin-left: 20rpx; margin-right: 30rpx; border-radius: 6rpx; border: 2rpx solid rgba(121, 72, 234, 1);">
					  <!-- Picker 组件 -->
						<picker mode="selector" :range="options_train_target" @change="onPickerChange_train_target">
							<view class="picker-selected juzhong">
							  {{ aim ? aim : '点击选择' }}
							</view>
						</picker>
					</view>
					
					<view class="juzhong" style="margin-top: 20rpx; font-size: 40rpx;">训练动作</view>
					<view class="picker juzhong" style="height: 70rpx; margin-left: 20rpx; margin-right: 30rpx; border-radius: 6rpx; border: 2rpx solid rgba(121, 72, 234, 1);">
					  <!-- Picker 组件 -->
						<picker mode="selector" :range="options_train_action" @change="onPickerChange_train_action">
							<view class="picker-selected juzhong">
							  {{ action ? action : '点击选择' }}
							</view>
						</picker>
					</view>
				</view>
				
				<view class="train-choose-right">
					
					<view class="float"  style="font-size: 40rpx;">
						<view class="fr">1RM:</view>
						<view class="fuhe-rm"><input @blur="check_burden_value" style="font-size: 20rpx;" v-model="rm" type="text" placeholder="输入1RM" /></view>
						<view style="margin-left: 10rpx;">KG</view>
					</view>
					<view class="float" style="font-size: 40rpx;">
						<view class="fr">负荷：</view>
						<view class="fuhe-rm" style=""><input style="font-size: 20rpx;"  @focus="onInputFocus"  ref="burdenInput"  v-model="burden" type="text" placeholder="输入杠铃重量" /></view>
						<view style="margin-left: 10rpx;">KG</view>
					</view>
					<view class="juzhong" style="margin-top: 10rpx;">
						<button class="celiang1rm juzhong" @click="goOneRm" style="margin-right: 30rpx; height: 60rpx;">测量1RM</button>
						
						<button @click="tips_1rm" class="juzhong" style="margin-left: 10rpx; height: 60rpx; width: 60rpx; color: white; border-radius: 50%; background-color: rgba(121, 72, 234, 1);">?</button>
					</view>

				</view>
			</view>
			<view class="float footer">
				<button @click="gotoDefine" class="stop-start" style="width: 150rpx;">指标释义</button>
				<button class="stop-start" @click="try_stopRequest" style="width: 110rpx;">停止</button>
				<button class="stop-start" style="width: 150rpx;" @click="stop_group">结束本组</button>
				<button @click="start_judgement" class="stop-start" style="width: 110rpx;">开始</button>
			</view>
			<view v-if="showCircle" class="countdown-circle">
			  <text class="countdown-number">{{ countdown }}</text>
			  <text class="tip-text">请保证设备处于竖直方向并静止3s</text>
			</view>
		</view>

	</scroll-view>
</template>

<script>
  import VersionHeader from '@/components/version-header/version-header.vue';
  // import VersionFooter from '@/components/version-footer/version-footer.vue';
  import VersionCanvas from '@/components/version-canvas/version-canvas.vue';
  import VueEvent from '../../VueEvent';

  export default {
    components: {
      VersionHeader,
      // VersionFooter,
      VersionCanvas
    },

    data() {
      return {
	    isVersionControl: false, // 控制按钮样式的状态
		measured_acceleration_y: [],
		measured_acceleration_x: [],
		measured_acceleration_z: [],
		angular_velocity_y: [],
		angular_velocity_x: [],
		angular_velocity_z: [],
		audioContext: null, // 音频上下文
		maxDataLength: 10000, // 定义数组最大长度，可根据实际需求调整
		showCircle: false, // 控制倒计时圆圈是否显示
		countdown: 3, // 倒计时初始数字
        // simple和professional的button颜色
        accelarateData: [
		  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
		],
		n_base:0,
		local_g:0,
		intervalId1: null,    // 用于存储定时器ID
        tips: '等待开始中...',
        version: false,
        intervalId: null,  // 用于存储定时器ID
        options_train_target: ['增肌', '增强力量', '提升爆发力'],
        options_train_action: ['深蹲', '卧推', '硬拉'],
        options_target: {
          '增肌': 1,
          '增强力量': 2,
          '提升爆发力': 3,
        },
        options_action: {
          '深蹲': 1,
          '卧推': 2,
          '硬拉': 3,
        },
        aim: '', // 当前选择的训练目的
        action: '', // 当前选择的训练动作
        rm: '',
        burden: '',
		sub_tips:false,
		r: 0,     // 计时器的秒数
		timer: null, // 用来存储定时器ID，方便停止
		isMuted: false, // 初始为非静音
		img_url:[
			"../../static/imgs/voice_open.png",
			"../../static/imgs/voice_close.png"
		],
        arrs: [{
            text: '平均速度(m/s)',
            value: 'V'
          },
          {
            text: '峰值速度（m/s）',
            value: 'VMAX'
          },
          {
            text: '平均功率(W)',
            value: 'P'
          },
          {
            text: '峰值功率(W)',
            value: 'PMAX'
          }
        ],
        v_loss: 33,
        group: 0,
        index: 0,
		burden_Modal:false,
		check_burden:false,
		test_flag :0,
      }
    },

    mounted() {
		
	},
	onLoad(){
		
	},
	destroyed() {
	},


	
	
	methods:{
		onInputFocus() {
			if (this.aim === '' || this.action === '' || this.rm === '') {
				if (!this.burden_Modal) {
					this.burden_Modal = true;
					uni.showModal({
						title: '提示',
						content: '请先完善训练目的，训练动作和1rm的信息',
						showCancel: false,
						confirmText: '我已了解',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击了确定');
							}
							// 当弹窗关闭后，重置标志位，以便下次还能触发
							this.burden_Modal = false;  
						}
					});
				}
			}
			return false;
		},
		check_burden_value(){
			if(this.aim!=='' && this.action!==''&&this.rm!==''){
				if(!this.check_burden){
					this.check_burden = true ;
					uni.request({
					    url: 'http://182.92.108.71:5001/get_suggest',
					    method: 'POST', // 假设是POST请求，根据实际情况调整请求方式
						  data:{
							  'aim': this.options_target[this.aim] - 1, // 训练目的
							  'action': this.options_action[this.action] - 1, // 训练动作
							  'lrm': this.rm,
						  },
						  header: {
							  'Content-Type': 'application/json', // 根据服务器要求设置 Content-Type
						  },
					    success: (res) => {
					        if (res.statusCode === 200) {
								  // this.accelarateData = res.data.msg;
								  console.log("建议信息：",res.data);
								  uni.showModal({
								    title: '提示',
								    content: '建议负重'+res.data.Suggest[0].toFixed(1)+'kg-'+res.data.Suggest[1].toFixed(1)+'kg',
								    showCancel: false,
								    confirmText: '我已了解',
								    success: (res) => {
								      if (res.confirm) {
								        // console.log('用户点击了确定');
								  	  // 当弹窗关闭后，重置标志位，以便下次还能触发
								  	  this.check_burden = false;  
								      }
								    }
								  });
					        } else {
					            reject(`前置请求失败，状态码：${res.statusCode}`);
					        }
					    },
					    fail: (err) => {
					        reject(`前置请求错误：${err.errMsg}`);
					    },
					});
					
				}
				
			}
		},
		textToVoice(text) {
		    var pluginSI = requirePlugin("WechatSI");
		    var innerAudioSI = wx.createInnerAudioContext();
		  
		    pluginSI.textToSpeech({
		        lang: "zh_CN",
				// lang: "en_US",
		        tts: true,
		        content: text,
		        success: function (res) {
		            console.log("succ tts", res.filename);
		            innerAudioSI.src = res.filename;
		            innerAudioSI.play();
		
		            // 当语音播放结束时，停止并销毁 innerAudioSI 防止重复播放
		            innerAudioSI.onEnded(() => {
		                console.log("语音播放完毕");
		                innerAudioSI.stop();
		                innerAudioSI.destroy();  // 清理音频对象
		            });
		        },
		        fail: function (res) {
		            console.log("fail tts", res);
		        }
		    });
		    return innerAudioSI;
		},
		toggleMute() {
		  this.isMuted = !this.isMuted;
		},
		start_judgement(){

			if(this.aim===''||this.action===''||this.burden===''||this.rm===''){
				uni.showModal({
				  title: '内容不完整',
				  content: '请确保训练目的，训练动作，负荷，1RM均已填写或选择',
				  showCancel: false,
				  confirmText: '确认',
				});
			}else{
				VueEvent.init_Accelerometer();
				this.showCountdownCircle();
				
			}
		},
		

		showCountdownCircle() {
		  if (this.timer) {
		    clearInterval(this.timer); // 清除上一个定时器（防止重复计时）
		    this.countdown = 3; // 重置倒计时数字
		  }
		
		  this.tips = '等待开始中...';
		  this.showCircle = true;
		
		  // 语音播放完成后的回调，用来更新倒计时
		  const playVoice = (count) => {
		    if (!this.isMuted) {
		      this.textToVoice(count.toString()); // 播放倒计时语音
		    }
		  };
		
		  // 启动倒计时定时器
		  const timer = setInterval(() => {
		    if (this.countdown > 0) {
		      // 播放当前倒计时数字的语音
		      playVoice(this.countdown);
			  this.countdown--;
		    } else {
		      // 倒计时结束，播放“开始”语音
		      if (!this.isMuted) {
		        this.textToVoice('开始');
				
		      }
		
		      clearInterval(timer); // 清除定时器
		      this.countdown = 3; // 重置倒计时数字
		      this.showCircle = false;
		      this.startRequest(); // 倒计时结束后，开始请求
		    }
		  }, 1000); // 每秒检查一次
		},


		try_stopRequest(){
			uni.showModal({
			  // title: '1RM是什么?',
			  content: '停止训练后将清除数据',
			  showCancel: true,
			  confirmText: '确定',
			  success: (res) => {
			      if (res.confirm) {
			        // 用户点击了确定
					this.stopRequest();
					this.group=0;
					this.index=0;
			      } else if (res.cancel) {
					  
			      }
			    },
			});
		},
		stop_group() {
			uni.showModal({
			  // title: '1RM是什么?',
			  content: '确定结束本组训练吗',
			  showCancel: true,
			  confirmText: '确定',
			  success: (res) => {
			      if (res.confirm) {
			        // 增加组的计数
			        this.stopRequest();
			        this.group = this.group + 1;
			        this.index = 0 ;
			        // 初始化 r 为 1，每次点击重新开始计时
			        this.r = 1;
			        
			        // 更新显示提示信息
			        this.updateTips();
			        		
			        // 启动计时器，每隔一秒更新一次 r
			        if (this.timer) {
			          clearInterval(this.timer); // 清除上一个定时器（防止重复计时）
			        }
			        this.startTimer();
			      } 
			    },
			});
			
		},
		startTimer() {
			// 每秒更新一次 r
			this.timer = setInterval(() => {
			  this.r++; // r 值递增
			  this.updateTips(); // 更新显示的提示信息
			}, 1000); // 每秒触发一次
		},
			
		// 更新显示的提示信息
		updateTips() {
			this.tips = `组间休息中：${this.r}秒`;
		},
			
		// 如果需要停止计时器，可以调用这个方法
		stopTimer() {
			clearInterval(this.timer); // 清除定时器
			this.timer = null;
		},
		// 停止监听加速度数据
		stopListeningAccelerometer() {
			clearInterval(this.intervalId1); // 停止定时器
			uni.stopAccelerometer(); // 停止加速度监听
		},
		startRequest() {
		  console.log('start to post message');
			this.index = 0 ;
		  if (this.intervalId) {
		    return; // 如果定时器已经存在，防止重复点击
		  }

		  // 使用 setInterval 设置定时器
		  this.intervalId = setInterval(() => {
		    this.sendRequest();
			console.log('我发送了一次请求')
		  }, 200);  // 每隔1000毫秒发送一次请求
		},
		// 停止发送请求
		stopRequest() {
		  console.log('stop to post message');
		  VueEvent.init_Accelerometer();
		  if (this.intervalId) {
		    clearInterval(this.intervalId);  // 清除定时器
		    this.intervalId = null;  // 重置定时器ID
		  }
		},
		async sendRequest() {
		    // 先向另一个地址发送请求获取数据
		    const preUrl = 'http://182.92.108.71:5001/xyz_to_y'; // 替换为实际的前置请求接口地址
		    try {
		        const preResponse = await new Promise((resolve, reject) => {
		            uni.request({
		                url: preUrl,
		                method: 'POST', // 假设是GET请求，根据实际情况调整请求方式
						  data:{
							  "measured_acceleration_y":VueEvent.sharedData.measured_acceleration_y,
							  "measured_acceleration_x":VueEvent.sharedData.measured_acceleration_x,
							  "measured_acceleration_z":VueEvent.sharedData.measured_acceleration_z,
							  "angular_velocity_y":VueEvent.sharedData.angular_velocity_y,
							  "angular_velocity_x":VueEvent.sharedData.angular_velocity_x,
							  "angular_velocity_z":VueEvent.sharedData.angular_velocity_z,
							  "flag":200
						  },
						  header: {
							  'Content-Type': 'application/json', // 根据服务器要求设置 Content-Type
						  },
		                success: (res) => {
		                    if (res.statusCode === 200) {
								  this.accelarateData = res.data.msg;
								  console.log("加速度修正成功！！！");
								  console.log("此时的y轴加速度");
								  console.log(this.measured_acceleration_y);
								  console.log("修正后的加速度")
								  console.log(res.data.msg);
		                        resolve(res.data);
		                    } else {
		                        reject(`前置请求失败，状态码：${res.statusCode}`);
		                    }
		                },
		                fail: (err) => {
		                    reject(`前置请求错误：${err.errMsg}`);
		                },
		            });
		        });
		
		        // 包装请求数据
		        const url = 'http://182.92.108.71:5001/simple_new'; // 替换为你的接口地址
		        const data = {
		            'aim': this.options_target[this.aim] - 1, // 训练目的
		            'action': this.options_action[this.action] - 1, // 训练动作
		            'lrm': this.rm,
		            'm_data': this.burden,
		            "accelarate_Data": this.accelarateData,  // 使用收集到的加速度数据
					"n_base":this.index,
					"local_g":this.local_g,
		        };
		
		        console.log("发送请求的数据：", data);
		
		        try {
		            // 发送 POST 请求
		            const response = await new Promise((resolve, reject) => {
		                uni.request({
		                    url, // 请求地址
		                    method: 'POST', // 请求方式
		                    data, // 请求数据
		                    header: {
		                        'Content-Type': 'application/json', // 根据服务器要求设置 Content-Type
		                    },
		                    success: (res) => {
		                        if (res.statusCode === 200) {
		                            // 确保 msg 数组存在且不为空
		                            // console.log('获取的数据为:', res.data);
		                            if (res.data && res.data.msg && res.data.msg.length > 0) {
		                                const lastMsg = res.data.msg[res.data.msg.length - 1];
										console.log(lastMsg);
										if (lastMsg['updata_flag']===1){
											console.log("开始更新");
											VueEvent.init_Accelerometer();
											this.index  = lastMsg['n_base'];
											this.local_g = lastMsg['local_g'];
										}
		                                if (lastMsg["averagy_v_value"].toFixed(2)!=0.00) {
		                                    console.log('数据发生变化');
		                                    // this.group = lastMsg["第几组"];
		                                    // this.index = lastMsg["n_base"];
		                                    this.v_loss = (lastMsg["loss"] * 100).toFixed(1);  // 保留两位小数
		                                    this.arrs[0].value = lastMsg["averagy_v_value"].toFixed(2);  // 保留两位小数
		                                    this.arrs[1].value = lastMsg["v_peak"].toFixed(2);  // 保留两位小数
		                                    this.arrs[2].value = lastMsg["averagy_power_value"].toFixed(2);  // 保留两位小数
		                                    this.arrs[3].value = lastMsg["power_peak"].toFixed(2);  // 保留两位小数
		                                    console.log("每次获取的值",this.arrs);
											this.tips = lastMsg["message"];
											if(lastMsg["message"]==='建议调整重量，减重'||lastMsg["message"]==='建议调整重量,减重'){
												lastMsg["message"]='建议减少重量';
												this.tips = '建议减少重量';
											}else if(lastMsg["message"]==='建议调整重量，增重'||lastMsg["message"]==='建议调整重量,增重'){
												lastMsg["message"]='建议增加重量';
												this.tips = '建议增加重量';
											}
											// 播报 tips 内容
											if(!this.isMuted){
												console.log('当前计数',this.test_flag);
												this.test_flag = this.test_flag+1;
												if(lastMsg["message"]==='请继续训练'){
													this.textToVoice(lastMsg["averagy_v_value"].toFixed(2) + "米每秒");
													
												}else{
													this.textToVoice(lastMsg["message"]);
												}
											}
		                                } else {
		                                    console.log("数据没有变化");
		                                }
		                            } else {
		                                console.error('响应数据格式错误，msg为空或不存在');
		                            }
		                        } else {
		                            reject(`请求失败，状态码：${res.statusCode}`);
		                        }
		                    },
		                    fail: (err) => {
		                        reject(`请求错误：${err.errMsg}`);
		                    },
		                });
		            });
		        } catch (error) {
		            console.error('请求失败：', error);
		        }
		    } catch (preError) {
		        console.error('前置请求失败：', preError);
		    }
		},
		tips_1rm() {
		  uni.showModal({
		    title: '1RM是什么?',
		    content: '1RM：以正确的技术所能举起一次最大重量\n\n填写后会自动为您计算本次训练的最佳负荷',
		    showCancel: false,
		    confirmText: '我已了解',
		    success: (res) => {
		      if (res.confirm) {
		        console.log('用户点击了确定');
		      }
		    }
		  });

		},
		
		onPickerChange_train_target(event) {
		  const { value } = event.detail;
		  this.aim = this.options_train_target[value];
		  this.check_burden_value();
		},
		
		onPickerChange_train_action(event) {
		  const { value } = event.detail;
		  this.action = this.options_train_action[value];
		  this.check_burden_value();
		},
		
		goOneRm() {
		  uni.navigateTo({
		    url: '/pages/jobOneRm/jobOneRm'
		  });
		},
		gotoDefine() {
		  uni.navigateTo({
		    url: '/pages/define/define',
		  });
		}
	}

}
  

</script>


<style lang="scss" scoped>
	.countdown-circle {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 200px;
	  height: 200px;
	  border-radius: 100px;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	
	.countdown-number {
	  font-size: 50px;
	  color: white;
	  margin-bottom: 10px;
	}
	
	.tip-text {
	  color: white;
	  text-align: center;
	  font-size: 30rpx;
	  margin: 20rpx;
	}
	.container {
		width: 100%;
		white-space: nowrap;
		display: flex;
		justify-content: flex-end;
	}

	.tips {
		font-size: 10rpx;
		margin: 0rpx;
		-webkit-transform: scale(0.7)
	}


	button {
		opacity: 1;
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(0, 0, 0, 1);
	}

	.number-sn {
		width: 120rpx;
		display: flex;
		justify-content: center;
	}

	button {
		opacity: 1;
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(121, 72, 234, 1);
	}

	.number-sn {
		width: 120rpx;
		display: flex;
		justify-content: center;
	}

	.grid-item {
		margin-top: 22.913rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.heibian {
		border-bottom: 1px solid rgba(121, 72, 234, 1);
	}

	.grid-item {
		margin-top: 22.913rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.heibian {
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	}

	.float {
		display: flex;
	}

	.layout {
		font-weight: 400;
		font-family: 'Source Han Sans', sans-serif;
		padding: 0px 16px;
		background-color: rgba(155, 115, 250, 0.05);
		height: 100%;
		width: 100%;
	}

	.version-change {
		height: 90rpx;
		display: flex;
	}

	.version-button {
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(0, 0, 0, 1);
		margin-top: 16px;
		width: 97.96px;
		height: 28px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8px;
	}

	.juzhong {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.train-choose-left {
		padding-top: 6.2rpx;
		font-size: 33.3rpx;
		width: 50%;
		padding-bottom: 31.2rpx;
		border-right: 1px solid rgba(121, 72, 234, 1);
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.check-button {
		background: rgba(166, 166, 166, 0.5);
		border: 1px solid rgba(255, 255, 255, 1);
		margin-top: 16px;
		width: 97.96px;
		height: 28px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8px;
	}

	.speed-left {
		width: 50%;
		font-size: 41.66rpx;
		padding-top: 31.2rpx;
	}

	.stop-start {
		margin-top: 20.83rpx;
		height: 58.3rpx;
		opacity: 1;
		border-radius: 8px;
		font-size: 12rpx;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 37.5rpx;
	}

	.juzhong {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.train-choose-left {
		padding-top: 6.2rpx;
		font-size: 33.3rpx;
		width: 50%;
		padding-bottom: 31.2rpx;
		border-right: 1px solid rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.train-choose {
		color: rgba(0, 0, 0, 0.15);
		width: 60%;
		height: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}


	.speed-loss {
		height: 454rpx;
	}

	.four-value {
		height: 299.952rpx;
	}

	.two-value {
		height: 304.118rpx;
	}

	.single-module {
		font-size: 33.4rpx;
		height: 50%;
		width: 50%;
		text-align: center;
		line-height: 70rpx;
	}

	.train-choose-right {
		padding: 39.6rpx;
	}

	.train-choose-right input {
		padding-top: 37.5rpx;
		padding-left: 25rpx;
		padding-bottom: 52rpx;
		width: 95.82rpx;
		height: 48rpx;
		border-radius: 5px;
	}

	.fr {
		height: 50rpx;
		width: 138.3rpx;
	}

	.fuhe-rm {
		width: 156rpx;
		height: 48rpx;
		/* 确保高度足够容纳输入框内容 */
		margin-bottom: 23rpx;
	}

	.fuhe-rm input::placeholder {
		font-size: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		/* 让 placeholder 水平居中 */
	}

	.fuhe-rm input {
		width: 100%;
		height: 100%;
		/* 保证高度占满容器 */
		padding: 6rpx 4rpx;
		/* 减少上下内边距，避免遮挡提示词 */
		box-sizing: border-box;
		border: 1px solid black;
		font-size: 10rpx;
		line-height: 28rpx;
		/* 调整行高，确保文本垂直居中 */
		text-align: center;
		/* 让 placeholder 水平居中 */
	}


	.celiang1rm {
		margin-top: 8.4rpx;
		width: 230rpx;
		height: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
		white-space: nowrap;
	}

	.celiang1rm input {
		background-color: #007BFF;
		font-size: 33.3rpx;
		border: none;
		padding: 10rpx 20rpx;
	}
	.footer {
	  display: flex;
	  justify-content: space-between; /* 左右对齐 */
	  align-items: center;
	  height: 112.5rpx;
	  width: 100%; /* 确保占满父级 */
	  box-sizing: border-box;
	}
	
	.right {
	  display: flex;
	  justify-content: flex-end; /* 内容靠右 */
	  flex-shrink: 0; /* 防止压缩 */
	}
	
	.left{
		display: flex;
		justify-content: flex-start;
	}
	/* .right{
		display: flex;
		justify-content: flex-end;
		border: 1px solid black;
	} */
	.introduction{
		margin-top: 20.83rpx;
		width: 237.5rpx;
		height: 58.3rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.float {
	  display: flex;
	}
	.stop-start {
	  margin-top: 20.83rpx;
	  width: 177.5rpx;
	  height: 58.3rpx;
	  opacity: 1;
	  border-radius: 8px;
	  font-size: 16px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /* margin-right: 37.5rpx; */
	}
	button {
	  opacity: 1;
	  border-radius: 8px;
	  background: rgba(255, 255, 255, 1);
	  border: 1px solid rgba(121, 72, 234, 1);
	}
</style>